<template>
  <ul>
    <li
      :class="{ active: checkI == index }"
      v-for="(item, index) in list"
      :key="index"
      @click="cut(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>
<script setup>
import emitter from '../utils/bus.js';
import { ref } from 'vue';
const list = ["北京", "郑州", "上海", "深圳"];
const checkI = ref(0);

const cut = (i) => {
  checkI.value = i;
//    console.log(emitter);
  emitter.emit('cut',list[i]);
}
</script>
<style lang="scss" scoped>
ul{
  list-style: none;
  display: flex;
  li{
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
}
.active{
  color: red;
}
</style>